<template>
    <div class="vu_content">
        <view
            v-for="item_iframe in iframeList"
            :key="item_iframe.id"
            class="content-item"
        >
            <span>窗口{{ item_iframe.id }}</span>
            <el-input
                v-model="item_iframe.tilt"
                placeholder="窗口描述"
                clearable
            ></el-input>
            <div>
                <span>添加请求头</span>
                <el-button
                    @click="iframeAddHeader(item_iframe)"
                    type="primary"
                    style="float: right"
                    >增加
                </el-button>
                <el-empty v-show="item_iframe.headers.length === 0"></el-empty>
                <el-form-item
                    v-for="(it, index) in item_iframe.headers"
                    :key="index"
                >
                    <el-input
                        v-model="item_iframe.headers[index].name"
                        placeholder="请求头key"
                    >
                    </el-input>
                    <el-input
                        v-model="item_iframe.headers[index].value"
                        placeholder=""
                    >
                    </el-input>

                    <el-button
                        @click="removeIframeHeader(item_iframe, index)"
                        type="danger"
                        style="float: right"
                        >删除
                    </el-button>
                </el-form-item>
            </div>
            <el-input
                v-model="item_iframe.src"
                placeholder="窗口地址"
                clearable
            ></el-input>
            <iframe
                :id="item_iframe.dynamicIframeId"
                :src="item_iframe.src"
                style="height: 100%; width: 100%; margin: 0; border: 0"
                frameborder="0"
                scrolling="no"
            >
            </iframe>
            <el-button @click="previewIframe(item_iframe)"> 预览 </el-button>
        </view>
        <view class="content-item">
            <el-button type="primary" @click="addIframe()"
                >添加iframe
            </el-button>
        </view>
    </div>
</template>
<script>
import menu from "@/views/pages/system/components/menu";
import { moduleName } from "@/config";

export default {
    data: () => ({
        description: "动态iframe",
        buttons: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
            dictionaryData: { name: "查看翻译详细数据", toPath: true }, //to path:true 需要设置跳转路径
        },
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "Microphone",
        name: "动态iframe",
        parentMenu: menu,
        module: moduleName,
    }),
};
</script>

<script setup>
import { onMounted, ref } from "vue";

const iframeList = ref([]);

/**
 * 移除请求头
 * @param iframe iframe
 * @param index 需要移除的下标
 */
const removeIframeHeader = (iframe, index) => {
    let headers = iframe.headers;
    console.log("当前iframe请求头" + headers);
    headers.splice(index, 1);
    const dynamicIframe = document.querySelector("#" + iframe.dynamicIframeId);
    populateIframe(dynamicIframe, [["token1", "header"]], iframe);
};
/**
 * 新增请求头
 * @param iframe iframe
 */
const iframeAddHeader = (iframe) => {
    let headers = iframe.headers;
    console.log("当前iframe请求头" + headers);
    headers.push({
        name: "",
        value: "",
    });
};
/**
 * iframe 添加请求头
 */
const populateIframe = (dynamicIframeElement, headers, iframe) => {
    let url = iframe.src;
    let xhr = new XMLHttpRequest();
    // `${this.apiUrl}${this.url}` 请求的URL
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.setRequestHeader("Accept", "*/*");
    headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1]);
    });
    xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
            console.log("xhr.response", xhr.response);
            if (xhr.status === 200) {
                dynamicIframeElement.src = URL.createObjectURL(xhr.response);
                // dynamicIframeElement.srcdoc = xhr.response;
                // iframe.src = URL.createObjectURL(xhr.response);
            }
        }
    };
    xhr.send();
};
onMounted(async () => {});

/**
 * 预览 iframe
 * @param iframe
 */
const previewIframe = (iframe) => {
    const dynamicIframe = document.querySelector("#" + iframe.dynamicIframeId);
    populateIframe(dynamicIframe, [["token1", "header"]], iframe);
};
const addIframe = () => {
    console.log("111");
    iframeList.value.push({
        id: "默认ID",
        src: "https://www.baidu.com",
        tilt: "默认表头",
        headers: [],
        dynamicIframeId: "dynamicIframeId_2",
    });
};
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-wrap: wrap;
    padding: calc((100vw - 40vw - 40vw) / 6);
}

.content-item {
    width: 40vw;
    height: 140px;
    background: #ffffff;
    margin: calc((100vw - 40vw - 40vw) / 6);
}
</style>
